/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-16 08:57:19
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-22 11:04:26
 * @FilePath: \四阶段项目\src\components\workorder\CheckworkOrder.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React,{useState,useEffect} from 'react'
import {inject,observer} from 'mobx-react'
import { toJS } from 'mobx';
import '../../assets/css/workordercss/CheckworkOrder.css'

function CheckworkOrder(props) {
  
  const [data,setData]=useState({})

  useEffect(() => {
    const data=toJS(props.workOrderStore.CheckWorkOrderList)
    setData(data)
    
  }, [props.workOrderStore.CheckWorkOrderList]);

    
   
  function dome(e){
     console.log(e.target.value,e.target.dataset.key);
    //  const obj ={...data}
    //  obj[e.target.dataset.key]=e.target.value
    //  setData(obj)
  } 
  return (
    <div id="mod">
    <h3>工单处理结果</h3>
    <ul>
        <li style={{ display: "flex" }}>
          <span>客户名称</span>
          <span>
            <input type="text" value={data.customer_name}  onChange={(e)=>dome(e)} key={data.customer_name} data-key='customer_name'/>
          </span>
        </li>{" "}
        <li style={{ display: "flex" }}>
        <span>关联信息</span>
          <button>基本资料</button>
          <button>跟单</button>
          <button>订单</button>
          <button>合同</button>
          <button>售后</button>
          <button>收支</button>
      </li>{" "}
      <li style={{ display: "flex" }}>
      <span>客户联系人</span>
      <span>
        <input type="text" value={data.contact_name} onChange={(e)=>dome(e)} key={data.contact_name} data-key='contact_name'/>
      </span>
    </li>{" "}
    <li style={{ display: "flex" }}>
      <span>工单类型</span>
      <span>
        <input type="text" value={data.work_order_type} onChange={(e)=>dome(e)} key={data.work_order_type} data-key='work_order_type'/>
      </span>
    </li>{" "}
    <li style={{ display: "flex" }}>
      <span>指派人员</span>
      <span>
        <input type="text" value={data.assigned_personnel} onChange={(e)=>dome(e)} key={data.assigned_personnel} data-key='assigned_personnel'/>
      </span>
    </li>
    <li style={{ display: "flex" }}>
      <span>起始时间</span>
      <span>
        <input type="text" value={data.start_time} onChange={(e)=>dome(e)} key={data.start_time} data-key='start_time'/>
      </span>
    </li>
    <li style={{ display: "flex" }}>
      <span>结束时间</span>
      <span>
        <input type="text" value={data.end_time} onChange={(e)=>dome(e)} key={data.end_time} data-key='end_time'/>
      </span>
    </li>
    <li style={{ display: "flex" }}>
      <span>交通方式</span>
      <span>
        <input type="text" value={data.traffic_mode} onChange={(e)=>dome(e)} key={data.traffic_mode} data-key='traffic_mode'/>
      </span>
    </li>
    <li style={{ display: "flex" }}>
    <span>差旅联系人</span>
    <span>
      <input type="text" value={data.travel_contact} onChange={(e)=>dome(e)} key={data.travel_contact} data-key='travel_contact'/>
    </span>
  </li>
  <li style={{ display: "flex" }}>
    <span>工作描述</span>
    <span>
      <input type="text" value={data.job_describe} onChange={(e)=>dome(e)} key={data.job_describe} data-key='job_describe'/>
    </span>
  </li>
  <li style={{ display: "flex" }}>
  <span>工作记录</span>
  
    <button>工作记录</button>
  
</li>
<li style={{ display: "flex" }}>
  <span>发起人</span>
  <span>
  <input type="text" disabled={false} value={data.user_name} onChange={(e)=>dome(e)} key={data.user_name} data-key='user_name'/>
  </span>
</li>
      </ul>
    </div>
  )
}
export default inject('workOrderStore')(observer(CheckworkOrder))